import React,{Component} from 'react'
import '../css/register.css'
import { Form, Icon, Input, Button, Checkbox ,Tooltip, message} from 'antd';
import {NavLink} from 'react-router-dom'
import * as api from '../api/userInfo'
class Register extends Component{
    constructor(props){
        super(props)
    }
    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values);
          }
        });
      };
      reg(){
        console.log(this.props.form.getFieldsValue())
        let userName = this.props.form.getFieldValue('userName')
        let password = this.props.form.getFieldValue('password')
        let nickName = this.props.form.getFieldValue('nickName')
        let userInfo = {
          userName:userName,
          password:password,
          nickName:nickName
        }
        api.Register(userInfo).then(data=>{
          console.log(data.data.code)
          if(data.data.code == 'success'){
            message.success('注册成功，即将跳转页面',()=>{
              this.props.history.push('/login')
            })
          }else{
            message.warning('用户名已经被注册',()=>{
              this.props.form.setFieldsValue({['userName']:''})
              this.props.form.setFieldsValue({['password']:''})
              this.props.form.setFieldsValue({['nickName']:''})
              this.props.form.setFieldsValue({['confirm']:''})
            })
          }
        })
        
      }
      
    render(){
        const { getFieldDecorator } = this.props.form;
        return(
          <div className="pic_bg">
            <div className="box">
                <Form onSubmit={this.handleSubmit} className="login-form">
        <Form.Item label="userName">
          {getFieldDecorator('userName', {
            rules: [{ required: true, message: 'Please input your username!' }],
          })(
            <Input
              prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="Username"
            />,
          )}
        </Form.Item>
        <Form.Item
          label={
            <span>
              Nickname&nbsp;
              <Tooltip title="What do you want others to call you?">
                <Icon type="question-circle-o" />
              </Tooltip>
            </span>
          }
        >
          {getFieldDecorator('nickName', {
            rules: [{ required: true, message: 'Please input your nickname!', whitespace: true }],
          })(<Input />)}
        </Form.Item>
        <Form.Item label="Password" hasFeedback>
          {getFieldDecorator('password', {
            rules: [
              {
                required: true,
                message: 'Please input your password!',
              },
              {
                validator: this.validateToNextPassword,
              },
            ],
          })(<Input.Password />)}
        </Form.Item>
        <Form.Item label="Confirm Password" hasFeedback>
          {getFieldDecorator('confirm', {
            rules: [
              {
                required: true,
                message: 'Please confirm your password!',
              },
              {
                validator: this.compareToFirstPassword,
              },
            ],
          })(<Input.Password onBlur={this.handleConfirmBlur} />)}
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" className="login-form-button" onClick={()=>this.reg()}>
            注册
          </Button>
          Or <NavLink to="/login">login now!</NavLink>
        </Form.Item>
      </Form>
            </div>
            </div>
        )
    }
    
}
const WrappedNormalLoginForm = Form.create({ name: 'normal_login' })(Register)
export default WrappedNormalLoginForm